<template>
	<view class="calculator-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @tap="goBack">
				<text class="back-text">‹</text>
			</view>
			<text class="nav-title">计算器</text>
			<view class="nav-right"></view>
		</view>
		
		<!-- 显示屏 -->
		<view class="display">
			<view class="display-text">{{ display }}</view>
		</view>
		
		<!-- 按钮区域 -->
		<view class="button-grid">
			<!-- 第一行 -->
			<view class="button-row">
				<view class="button function-btn" @tap="clear">C</view>
				<view class="button function-btn" @tap="clearEntry">CE</view>
				<view class="button function-btn" @tap="backspace">⌫</view>
				<view class="button operator-btn" @tap="inputOperator('/')">÷</view>
			</view>
			
			<!-- 第二行 -->
			<view class="button-row">
				<view class="button number-btn" @tap="inputNumber('7')">7</view>
				<view class="button number-btn" @tap="inputNumber('8')">8</view>
				<view class="button number-btn" @tap="inputNumber('9')">9</view>
				<view class="button operator-btn" @tap="inputOperator('*')">×</view>
			</view>
			
			<!-- 第三行 -->
			<view class="button-row">
				<view class="button number-btn" @tap="inputNumber('4')">4</view>
				<view class="button number-btn" @tap="inputNumber('5')">5</view>
				<view class="button number-btn" @tap="inputNumber('6')">6</view>
				<view class="button operator-btn" @tap="inputOperator('-')">-</view>
			</view>
			
			<!-- 第四行 -->
			<view class="button-row">
				<view class="button number-btn" @tap="inputNumber('1')">1</view>
				<view class="button number-btn" @tap="inputNumber('2')">2</view>
				<view class="button number-btn" @tap="inputNumber('3')">3</view>
				<view class="button operator-btn" @tap="inputOperator('+')">+</view>
			</view>
			
			<!-- 第五行 -->
			<view class="button-row">
				<view class="button number-btn zero-btn" @tap="inputNumber('0')">0</view>
				<view class="button number-btn" @tap="inputNumber('.')">.</view>
				<view class="button equals-btn" @tap="calculate">=</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				display: '0',
				previousNumber: null,
				operator: null,
				waitingForOperand: false
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 输入数字
			inputNumber(num) {
				if (this.waitingForOperand) {
					this.display = num;
					this.waitingForOperand = false;
				} else {
					this.display = this.display === '0' ? num : this.display + num;
				}
			},
			
			// 输入运算符
			inputOperator(nextOperator) {
				const inputValue = parseFloat(this.display);
				
				if (this.previousNumber === null) {
					this.previousNumber = inputValue;
				} else if (this.operator) {
					const currentValue = this.previousNumber || 0;
					const newValue = this.performCalculation(currentValue, inputValue, this.operator);
					
					this.display = String(newValue);
					this.previousNumber = newValue;
				}
				
				this.waitingForOperand = true;
				this.operator = nextOperator;
			},
			
			// 执行计算
			calculate() {
				const inputValue = parseFloat(this.display);
				
				if (this.previousNumber !== null && this.operator) {
					const newValue = this.performCalculation(this.previousNumber, inputValue, this.operator);
					this.display = String(newValue);
					this.previousNumber = null;
					this.operator = null;
					this.waitingForOperand = true;
				}
			},
			
			// 执行具体的数学运算
			performCalculation(firstValue, secondValue, operator) {
				switch (operator) {
					case '+':
						return firstValue + secondValue;
					case '-':
						return firstValue - secondValue;
					case '*':
						return firstValue * secondValue;
					case '/':
						return secondValue !== 0 ? firstValue / secondValue : 0;
					default:
						return secondValue;
				}
			},
			
			// 清除所有
			clear() {
				this.display = '0';
				this.previousNumber = null;
				this.operator = null;
				this.waitingForOperand = false;
			},
			
			// 清除当前输入
			clearEntry() {
				this.display = '0';
			},
			
			// 退格
			backspace() {
				if (this.display.length > 1) {
					this.display = this.display.slice(0, -1);
				} else {
					this.display = '0';
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
		background: #f8fafc;
	}
	
	.calculator-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 20px 10px 20px;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
	}
	
	.nav-left {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
	}
	
	.back-text {
		font-size: 24px;
		font-weight: 700;
		color: white;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	
	.nav-title {
		font-size: 18px;
		font-weight: 700;
		color: white;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	
	.nav-right {
		width: 40px;
	}
	
	/* 显示屏样式 */
	.display {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20px 30px;
		background: rgba(0, 0, 0, 0.1);
		margin: 20px 20px 0 20px;
		border-radius: 20px;
		backdrop-filter: blur(10px);
	}
	
	.display-text {
		font-size: 48px;
		font-weight: 300;
		color: white;
		text-align: right;
		word-break: break-all;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	
	/* 按钮区域样式 */
	.button-grid {
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	
	.button-row {
		display: flex;
		gap: 15px;
	}
	
	.button {
		flex: 1;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20px;
		font-size: 24px;
		font-weight: 600;
		color: white;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
		transition: all 0.2s ease;
		user-select: none;
	}
	
	.button:active {
		transform: scale(0.95);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}
	
	/* 数字按钮 */
	.number-btn {
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
	}
	
	.number-btn:active {
		background: rgba(255, 255, 255, 0.3);
	}
	
	/* 运算符按钮 */
	.operator-btn {
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
	}
	
	.operator-btn:active {
		background: linear-gradient(135deg, #e55a2b 0%, #e8820a 100%);
	}
	
	/* 功能按钮 */
	.function-btn {
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(10px);
		font-size: 20px;
	}
	
	.function-btn:active {
		background: rgba(255, 255, 255, 0.25);
	}
	
	/* 等号按钮 */
	.equals-btn {
		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
		flex: 2;
	}
	
	.equals-btn:active {
		background: linear-gradient(135deg, #0d9b6b 0%, #047857 100%);
	}
	
	/* 零按钮 */
	.zero-btn {
		flex: 2;
	}
</style>
